<template>
<div class="example-chars">
  <div class="app-title-h1">
    可视化图表
  </div>
  <div ref="chart1" style="width:100%; height:300px"></div>
  <div ref="chart2" style="width:100%; height:300px"></div>
  <div ref="chart3" style="width:100%; height:300px"></div>
  <div class="flex">
    <div ref="chart4" style="width:400px; height:400px"></div>
    <div ref="chart5" style="width:400px; height:400px"></div>
    <div ref="chart6" style="flex:1; height:400px"></div>
  </div>
</div>
</template>

<script>
import myChart from 'echarts';
let option1 = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
};
let option2 = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        },
        {
            name:'直接访问',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334, 390, 330, 320]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '总量',
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};
let option3 = {
    xAxis: {
        type: 'category',
        data: ['1','2','3','4','5','1','2','3','4','5','1','2','3','4','5','1','2','3','4','5','6']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};
let option4 = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
let option5 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series: [
        {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
    ]
};
let option6 = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};

export default {
    name: 'example-charts',
    data() {
        return {

        };
    },
    mounted() {
      this.chart1 = myChart.init(this.$refs.chart1);
      this.chart2 = myChart.init(this.$refs.chart2);
      this.chart3 = myChart.init(this.$refs.chart3);
      this.chart4 = myChart.init(this.$refs.chart4);
      this.chart5 = myChart.init(this.$refs.chart5);
      this.chart6 = myChart.init(this.$refs.chart6);
      this.setChart1();
      this.setChart2();
      this.setChart3();
      this.setChart4();
      this.setChart5();
      this.setChart6();
    },
    methods: {
     setChart1() {
       // do something for options
       this.chart1.setOption(option1);
     },
     setChart2() {
       // do something for options
       this.chart2.setOption(option2);
     },
     setChart3() {
       // do something for options
       this.chart3.setOption(option3);
     },
     setChart4() {
       // do something for options
       this.chart4.setOption(option4);
     },
     setChart5() {
       // do something for options
       this.chart5.setOption(option5);
     },
     setChart6() {
       // do something for options
       this.chart6.setOption(option6);
     },
    },
};
</script>

<style lang="scss">
  .example-chars{
    .flex{
      display: flex;
    }
  }
</style>
